<script setup>
import {delete_post, update_post, status_post, get_post, list_post} from "@/apis/system/v1/post.js";
import Authority from "@/components/auth/Authority.vue";
import {Message} from "@arco-design/web-vue";
import Button from "@/components/common/button.vue";

const emit = defineEmits(['search']);
const refresh = inject("reload");
const isSearch = ref(true);
const visible = ref(false);
const search = () => {
  isSearch.value = !isSearch.value;
  emit("search", isSearch.value);
};
const renovate = () => {
  form.loading = !form.loading;
  setTimeout(() => {
    getPostList();
    form.loading = !form.loading;
  }, 1000);
};
const select = () => {
  visible.value = true;
};
const expandedKeys = ref([]);
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
});
const form = reactive({
  loading: false,
  name: true,
  code: true,
  sort: true,
  status: true,
  create_datetime: true
});

const postObj = ref({});
const postList = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(1);
const permissions = ['sys:post:view', 'sys:post:update', 'sys:post:delete', 'sys:post:add'];
const isEdit = ref(false);
const isView = ref(false);
const getMenuObj = (id) => {
  get_post(id).then(res => {
    isView.value = true;
    res.result.sort = res.result.sort + "";
    postObj.value = res.result;
  });
};
const getPostList = () => {
  list_post(page.value, pageSize.value).then(res => {
    if (res.code === 200) {
      res.result.items.map(item => {
        item.key = item.id;
        item.sort = item.sort + "";
      });
      total.value = res.result.total;
      postList.value = res.result.items;
    }
  });
};
const postState = (record) => {
  status_post(record.id).then(res => {
    if (res.code !== 200) {
      Message.error(res.message);
    } else {
      Message.success(res.message);
    }
  });
};
const editPost = (id) => {
  get_post(id).then(res => {
    isEdit.value = true;
    res.result.sort = res.result.sort + "";
    postObj.value = res.result;
  });
};
const editMenuOk = (id) => {
  delete postObj.value.id;
  delete postObj.value.create_datetime;
  delete postObj.value.update_datetime;
  update_post(id, postObj.value).then(res => {
    if (res.code !== 200) {
      Message.error(res.message);
      refresh();
    } else {
      Message.success("修改成功");
      refresh();
    }
  });
};
const deletePost = (id) => {
  delete_post(id).then(res => {
    if (res.code !== 200) {
      Message.error(res.message);
      refresh();
    } else {
      Message.success(res.message);
      refresh();
    }
  });
};
const closeView = () => {
  isView.value = false;
};
const pagination = (e) => {
  page.value = e;
  getPostList();
};
onMounted(() => {
  getPostList();
});
</script>

<template>
  <div class="jia-handle">
    <Button :permissions="permissions"></Button>
    <div class="jia-operate">
      <div style="border-radius: 5px 0 0 5px" class="jia-flex-center"
           @click="search">
        <icon-search size="14"/>
      </div>
      <div class="jia-flex-center" @click="renovate">
        <icon-sync size="14"/>
      </div>
      <div style="border-radius: 0 5px 5px 0" class="jia-flex-center" @click="select">
        <icon-select-all size="14"/>
        <a-modal v-model:visible="visible" draggable
                 title="岗位选项" width="200px">
          <a-checkbox v-model="form.name">岗位名称</a-checkbox>
          <a-checkbox v-model="form.code">岗位编码</a-checkbox>
          <a-checkbox v-model="form.sort">岗位排序</a-checkbox>
          <a-checkbox v-model="form.status">岗位状态</a-checkbox>
          <a-checkbox v-model="form.create_datetime">创建时间</a-checkbox>
        </a-modal>
      </div>
    </div>
  </div>
  <a-table v-if="postList.length > 0" v-model:expandedKeys="expandedKeys"
           :defaultExpandAllRows="true" :loading="form.loading"
           :row-selection="rowSelection" :data="postList" show-empty-tree>
    <template #columns>
      <a-table-column v-if="form.name" title="岗位名称" data-index="name"></a-table-column>
      <a-table-column v-if="form.code" title="岗位编码" data-index="code"></a-table-column>
      <a-table-column v-if="form.sort" title="岗位排序" data-index="sort"></a-table-column>
      <a-table-column v-if="form.status" title="状态" data-index="status">
        <template #cell="{ record }">
          <Authority>
            <template #default="{ userPermissions }">
              <a-switch v-model="record.status" @change="postState(record)"
                        :disabled="!userPermissions.includes(permissions[2])"
                        :checked-value="1" :unchecked-value="0"
                        checked-color="#1890ff" unchecked-color="#F56C6C">
                <template #checked>
                  <span>在职</span>
                </template>
                <template #unchecked>
                  <span>离职</span>
                </template>
              </a-switch>
            </template>
          </Authority>
        </template>
      </a-table-column>
      <a-table-column v-if="form.time" title="创建时间" data-index="create_datetime"></a-table-column>
      <a-table-column :width=160 title="操作" data-index="operate">
        <template #cell="{ record }">
          <Authority>
            <template #default="{ userPermissions }">
              <a-button class="table-button" type="primary" @click="editPost(record.id)"
                        :disabled="!userPermissions.includes(permissions[1])">
                <template #icon>
                  <icon-edit/>
                </template>
              </a-button>
            </template>
          </Authority>
          <Authority>
            <template #default="{ userPermissions }">
              <a-popconfirm content="是否确认删除？" @ok="deletePost(record.id)">
                <a-button class="table-button" type="primary" status="danger"
                          :disabled="!userPermissions.includes(permissions[2])">
                  <template #icon>
                    <icon-delete/>
                  </template>
                </a-button>
              </a-popconfirm>
            </template>
          </Authority>
          <Authority :permission="permissions[0]">
            <a-button v-if="record.type !== 0" class="table-button" type="primary" status="success"
                      @click="getMenuObj(record.id)">
              <template #icon>
                <icon-eye/>
              </template>
            </a-button>
          </Authority>
        </template>
      </a-table-column>
    </template>
  </a-table>
  <a-modal @ok="editMenuOk(postObj.id)" v-model:visible="isEdit" title="编辑岗位" width="550px">
    <a-form :model="postObj" layout="inline">
      <a-form-item field="title" label="岗位名称" required>
        <a-input v-model="postObj.name" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="请输入岗位名称" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="title" label="岗位编码">
        <a-input v-model="postObj.code" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="请输入岗位编码" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="title" label="岗位排序" required>
        <a-input v-model="postObj.sort" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="请输入岗位排序" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="status" label="岗位情况">
        <a-radio-group v-model="postObj.status">
          <a-radio :value="1">在职</a-radio>
          <a-radio :value="0">离职</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-drawer :width="950" :visible="isView" unmountOnClose
            @ok="closeView" @cancel="closeView">
    <a-form style="margin-top: 20px" :model="postObj" layout="inline">
      <a-form-item class="jia-form-item" field="title" label="岗位名称" required>
        <a-input v-model="postObj.name" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入岗位名称" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="title" label="岗位编码">
        <a-input v-model="postObj.code" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入岗位编码" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="title" label="岗位排序" required>
        <a-input v-model="postObj.sort" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入岗位排序" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="status" label="岗位情况">
        <a-radio-group v-model="postObj.status">
          <a-radio :value="1">在职</a-radio>
          <a-radio :value="0">离职</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-drawer>
  <div class="jia-pagination">
    <a-pagination @change="pagination" :current="page" :total="total" show-total show-jumper show-page-size/>
  </div>
</template>

<style scoped lang="less">
.jia-handle {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .jia-operate {
    width: 135px;
    height: 100%;
    display: flex;

    div {
      cursor: pointer;
      width: 44px;
      height: 29px;
      color: #885DFD;
      border: 1px solid #e8e8e8;

      &:nth-child(2) {
        border-left: none;
        border-right: none;
        border-top: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }

      &:hover {
        background: var(--active-bg1);
      }
    }
  }
}

.table-button {
  border-radius: 5px;
  margin-left: 5px;
}
</style>